<script setup lang="ts">

import SelectedArticles from "@/components/index/article/SelectedArticles.vue";

import {articleContent} from "@/http/home";
import {ref} from "vue";
import {useRouter} from "vue-router";

const onClickLeft = () => history.back();
// const data=ref({
//     articleId: '1',
//     pageNum: '2',
//     pageSize: '3',
// })
// collectionPaga(data.value).then(res=>{
//     console.log(res)
// })

// 获取pinna里的collect值
// const collect=indexPinna()
// let baseUrl = 'http://192.168.5.120:8090'
let articleList = ref<any[]>([])
articleContent({pageNum: 1, pageSize: 5}).then(res => {
    console.log(res)
    if (res.code == 200) {
        articleList.value = res.rows
        // console.log(articleList.value)
    }

});

//跳转到文章详情页面传参
const detailId = useRouter()

function jumpDetail(item) {
    detailId.push({
        path: '/textDetail',
        query: {id: item.id}
    })
}
</script>

<template>
    <div>
        <div class="beijing">
            <van-nav-bar
                    left-text="我的收藏"
                    left-arrow
                    @click-left="onClickLeft"
            />
            <!--        文章-->
            <!--    <div class="Article">-->
            <!--        <div class="Details">-->
            <!--            <div class="Words">-->
            <!--                <div>111111</div>-->
            <!--            </div>-->
            <!--            <div class="time">-->
            <!--                <span>30人阅读</span>-->
            <!--                <span>2012-10-11</span>-->
            <!--            </div>-->

            <!--        </div>-->
            <!--        <div class="Picture">-->
            <!--            <img src="../../../../../public/20220622180647_14eea.jpg" alt="" id="poei">-->
            <!--        </div>-->
            <!--    </div>-->

                <template v-for="item in articleList" :key="item.id">
                    <SelectedArticles :articleInfo="item" @click="jumpDetail(item)"
                                      v-if="item.collect==0"></SelectedArticles>
                </template>
        </div>
    </div>
</template>

<style scoped>
.beijing {
    background-color: #f4f4f4;
    height: 600px;

    .each {
        border-radius: 10px;
        padding: 8px 3px;
        width: 100%;
        height: 13vh;
        margin-bottom: 10px;
        background-color: white;
        display: flex;
        justify-content: space-between;

        .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 70%;

            p {
                margin-top: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .span {
                color: grey;
                display: flex;
                justify-content: space-between;
            }
        }

        .pic {
            margin-left: 8px;
            height: 10vh;
            width: 26%;

            img {
                width: 100%;
                height: 100%;
            }
        }

    }
}
</style>